<?php 
$this->load->view('admin/layout/head', array('title'=>'用户管理', 'nav' => 'user'), FALSE);
?>

<style>
	.user-line {
	    margin: 20px 0px;
	    background-color: #fff;
	}
	.user-line li {
		padding: 10px 15px;
    	margin-bottom: 5px;	
	}
	.user-line label {
		width: 6em;
	}

	.user-line .name-input {
		width: 6em;
	}
</style>

<div id="container">
	<form class="form-inline deal-from container-fluid no-padding" id="link-form">
		<button class="btn btn-primary" type="button" @click="addUser">添加一行</button>
		<ul class="mt-20 user-line">
			<li v-for="(item, index) in users" :key="index">
					<span>{{index+1}}. </span>
					<label for="">手机号</label>
					<input type="text" v-model="item.phone" />
					<label for="">密码</label>
					<input type="password" v-model="item.password" />
					<label for="">昵称</label>
					<input type="text" v-model="item.nickname" />
					<label for="">真实姓名</label>
					<input type="text" class="name-input" v-model="item.first_name" /> <input class="name-input" type="text" v-model="item.last_name"/>
					<button type="button" class="btn btn-danger" @click="deleteUser(index)"><?= $this->lang->line('delete') ?></button>
			</li>
		</ul>

		<div style="padding-left:110px" class="mt-20">
			<button type="button" class="btn btn-primary" @click="save"><?= $this->lang->line('save') ?></button>
			<button type="button" class="btn btn-danger" @click="back"><?= $this->lang->line('cancel') ?></button>
			<button type="button" class="btn btn-warning" @click="clearUser" ><?= $this->lang->line('clear') ?: '清空' ?></button>
	    </div>
	</form>
</div>


<?php 

$this->load->view('admin/layout/footer');
?>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#container',
		data: {
			users: [{}],
		},
		created () {

		},
		methods: {
			back: function () {
				window.history.back();
			},
			addUser: function () {
				this.users.push({});
			},
			deleteUser: function (index) {
				this.users.splice(index, 1);
			},
			clearUser: function () {
				this.users = [];
			},
			save: function () {
				$.ajax({
					url: '/admin/user/multi_add',
					type: 'post',
					data: {users: this.users},
					success: function () {
						Toast.success('保存成功');
						window.location.href= '/admin/user';
					},
					error: function () {
						Toast.error('保存失败');
					}
				});
			}
		}
	})
</script>